<template>
  <wf-el-drawer title="批量导出" :visible.sync="visible" size="520px">
    <div class="org-import-box">
      <div class="org-import-box-item">
        <i class="el-icon-document org-import-box-icon"></i>
      </div>
      <div class="org-import-box-item">
        <span class="org-import-box-text">批量导出部门通讯录，导出后可查看成员信息</span>
      </div>
      <div class="org-import-box-item">
        <el-button class="org-import-box-btn" @click="exportUsers">导出</el-button>
      </div>
    </div>
    <div slot="footer">
      <el-button @click="hide">取消</el-button>
    </div>
    <select-export-dept-modal ref="selectEportDeptModal" @on-ok="onOk" />
  </wf-el-drawer>
</template>

<script>
  import { exportUsers } from '@/api/organization';
  import { downloadBlob } from '@/utils/download';

  import SelectExportDeptModal from '../components/SelectExportDeptModal';

  export default {
    components: { SelectExportDeptModal },
    data() {
      return {
        visible: false,
        organizationId: 0,
        deptId: 0,
      };
    },
    methods: {
      onOpen(data) {
        const { organizationId, mainId } = data;
        this.organizationId = organizationId;
        this.deptId = mainId;
        this.fileList = [];
        this.visible = true;
      },
      hide() {
        this.visible = false;
        this.organizationId = 0;
        this.deptId = 0;
        this.fileList = [];
      },
      exportUsers() {
        this.$refs['selectEportDeptModal'].show();
      },
      async onOk(deptIds) {
        const res = await exportUsers({
          organizationId: this.organizationId,
          deptIds,
        });
        downloadBlob(res.data, res.filename);
        this.hide();
      },
    },
  };
</script>

<style lang="scss" scoped>
  .org-import-box {
    text-align: center;
    padding: 30px;
    margin: 10px 0;
    background-color: #f8f8fa;
    border-radius: 5px;
  }
  .org-import-box-item {
    padding: 15px 0;
  }
  .org-import-box-icon {
    font-size: 40px;
    color: #4276ee;
  }
  .org-import-box-btn {
    width: 380px;
  }
  .org-import-box-text {
    color: #7f848b;
  }
</style>
